<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8_3_4-列表过渡动画</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /*添加动画的中间与结束动画的中间*/
        .list-enter-active,
        .list-leave-active {
            transition: all 1s ease;
        }

        /*添加动画的开始与移除动画的结束*/
        .list-enter-from,
        .list-leave-to {
            opacity: 0;
        }

        /*排序过程动画*/
        .list-move {
            transition: transform 1s ease;
        }
    </style>
    <div id="Application">
        <button @click="click">添加元素</button>
        <button @click="dele">删除元素</button>
        <button @click="ro">逆序元素</button>
        <transition-group name="list">
            <div v-for="item in items" :key="item">
                元素：{{item}}
            </div>
        </transition-group>
    </div>
    <script>
        const App = Vue.createApp({
            data() {
                return {
                    items: [1, 2, 3, 4, 5]
                }
            },
            methods: {
                //添加元素
                click() {
                    this.items.push(this.items[this.items.length - 1] + 1)
                },

                //删除元素
                dele() {
                    if (this.items.length > 0) {
                        this.items.pop()
                    }
                },

                //逆序元素
                ro() {
                    this.items.reverse()
                }
            }
        })
        App.mount("#Application")
    </script>
</body>

</html>